<template>
	<div style="width: 100%;height: 100%" v-if="curWeather">
		<div class="weather-view" v-if="config.styles.template ==1">
			<div class="weather-view-img"><img :src="getImage('/image/'+curWeather.wea_img+'.gif')"></div>
			<div class="weather-view-common">
				<div class="weather-view-common-tite" :style="{'font-size':otherStyle.fontSize+'px','color':otherStyle.color,'font-weight':otherStyle.fontWeight}">{{curWeather.country}}-{{curWeather.city}}</div>
				<div class="weather-view-common-temperature" :style="{'font-size':temperatureStyle.fontSize+'px','color':temperatureStyle.color,'font-weight':temperatureStyle.fontWeight}">{{curWeather.tem}}℃</div>
			</div>
			<div>
				<div :style="{'font-size':otherStyle.fontSize+'px','color':otherStyle.color,'font-weight':otherStyle.fontWeight}">天气：{{curWeather.wea}}</div>
				<div :style="{'font-size':otherStyle.fontSize+'px','color':otherStyle.color,'font-weight':otherStyle.fontWeight}">温度：{{curWeather.tem2}}~{{curWeather.tem1}}</div>
				<div :style="{'font-size':otherStyle.fontSize+'px','color':otherStyle.color,'font-weight':otherStyle.fontWeight}">风况：{{curWeather.win_meter}}</div>
			</div>
		</div>
		<div class="weather-view" v-else-if="config.styles.template ==2">
			<div class="weather-view-img"><img :src="getImage('/image/'+curWeather.wea_img+'.gif')"></div>
			<div :style="{'font-size':temperatureStyle.fontSize+'px','color':temperatureStyle.color,'font-weight':temperatureStyle.fontWeight}">{{curWeather.tem}}℃</div>
			<div class="weather-view-fontSize-common" :style="{'font-size':otherStyle.fontSize+'px','color':otherStyle.color,'font-weight':otherStyle.fontWeight}"><span>{{curWeather.country}}-{{curWeather.city}}</span><span>天气：{{curWeather.wea}}</span><span>温度：{{curWeather.tem2}}~{{curWeather.tem1}}</span><span>风况：{{curWeather.win_meter}}</span></div>
		</div>
	</div>
</template>

<script>
/**
 * 天气组件
 * 天气Api文档 https://www.tianqiapi.com/index/doc?version=v61
 */
import ComponentView from "@/views/modules/preview/components/common/component-view.js";
import  ScreenViewManageApi from "@/api/screen/core/screen-view-manage.js";

export default {
	name: "weather-view",
	mixins:[ComponentView],
	data() {
		return {
			temperatureStyle:{},
			otherStyle:{},
			curWeather:"",
		}
	},
	mounted() {
		this.temperatureStyle = this.config.styles.temperatureStyle;
		this.otherStyle = this.config.styles.otherStyle;
	},
	methods: {
		getData(){
			 this.getWeather();
		},
		//获取天气
		getWeather(){
			let cityId=this.cityId || "";
			ScreenViewManageApi.getWeather(cityId).then(res=>{
				if(res && res.success){
					this.curWeather=res.data;
					this.setCityId(this.curWeather.cityid);
				}
			});
		},
	},
	watch: {}
}
</script>

<style scoped>
.weather-view-common{
	margin-right: 23px;
}
.weather-view{
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-items: center;
}
.weather-view-img{
	height: 100%;
	margin-right: 5px;
}
.weather-view-img img{
	height: 100%;
	max-width: 200px;
}
.weather-view-fontSize-common{
	margin-left: 23px;
}
.weather-view-fontSize-common span{
	margin-right: 10px;
}
</style>
